<template>
    <el-dialog :visible="dialogVisible" title="添加课时" @close="close()">
        <el-form :model="video" label-width="120px">
            <el-form-item label="课时标题">
                <el-input v-model="video.title" />
            </el-form-item>
            <el-form-item label="课时排序">
                <el-input-number v-model="video.sort" :min="0" />
            </el-form-item>
            <el-form-item label="是否免费">
                <el-radio-group v-model="video.free">
                    <el-radio :label="true">免费</el-radio>
                    <el-radio :label="false">默认</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 上传视频 -->
            <el-form-item label="上传视频">
                <el-upload ref="upload" :auto-upload="false" :on-success="handleUploadSuccess" :on-error="handleUploadError"
                    :on-exceed="handleUploadExceed" :before-remove="handleBeforeRemove" :on-remove="handleOnRemove"
                    :file-list="fileList" :limit="1" action="http://localhost:8130/admin/vod/media/upload">
                    <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
                    <el-button :disabled="uploadBtnDisabled" style="margin-left: 10px;" size="small" type="success"
                        @click="submitUpload()">
                        上传
                    </el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <div>
            <el-button @click="close()">取消</el-button>
            <el-button type="primary" @click="saveOrUpdate()">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import videoApi from '@/api/video'
import vodApi from '@/api/vod'

export default {
    data() {
        return {
            dialogVisible: false, // 是否显示 dialog
            video: { // 课时对象
                sort: 0,
                free: false
            },
            fileList: [], // 上传文件列表
            uploadBtnDisabled: false
        }
    },
    created() {

    },
    methods: {
        // 上传
        submitUpload() {
            this.uploadBtnDisabled = true
            // 提交上传
            this.$refs.upload.submit()
        },
        // 上传成功
        handleUploadSuccess() {
            this.uploadBtnDisabled = false
            if (response.success) {
                this.video.videoSourceId = response.data.videoId
                this.video.videoOriginalName = file.name
            } else {
                this.$message.error('上传失败')
            }
        },
        // 上传失败
        handleUploadError() {
            this.uploadBtnDisabled = false
            this.$message.error('上传失败')
        },
        // 上传多于一个视频
        handleUploadExceed(files, fileList) {
            this.$message.warning('想要重新上传视频，请先删除已上传的视频')
        },
        // 删除视频文件确认
        handleBeforeRemove(file, fileList) {
            return this.$confirm(`确认删除 ${file.name} ？`)
        },
        // 执行视频文件的删除
        handleOnRemove(file, fileList) {
            if (this.video.videoSourceId) {
                vodApi.removeByVodId(this.video.videoSourceId).then(response => {
                    this.video.videoSourceId = ''
                    this.video.videoOriginalName = ''
                    videoApi.updateById(this.video)
                    this.$message.success(response.message)
                })
            }
        },
        open(chapterId, videoId) {
            console.log("open");
            this.dialogVisible = true
            this.video.chapterId = chapterId
            if (videoId) {
                videoApi.getById(videoId).then(rsponse => {
                    this.video = rsponse.data.item
                    // 回显
                    if (this.video.videoSourceId) {
                        this.fileList = [{ 'name': this.video.videoOriginalName }]
                    }

                })
            }
        },
        // 关闭对话框
        close() {
            this.dialogVisible = false
            // 重置表单
            this.video = {
                sort: 0,
                free: false
            },
                this.fileList = []
        },
        // 保存或更新
        saveOrUpdate() {
            if (this.video.id) {
                this.update()
            } else {
                this.save()
            }
        },
        save() {
            this.video.courseId = this.$parent.$parent.courseId
            videoApi.save(this.video).then(response => {
                this.$message.success(response.message)
                // 关闭组件
                this.close()
                // 刷新列表
                this.$parent.fetchNodeList()
            })
        },
        update() {
            videoApi.updateById(this.video).then(response => {
                this.$message.success(response.message)
                // 关闭组件
                this.close()
                // 刷新列表
                this.$parent.fetchNodeList()
            })
        },
    }
}
</script>